<template>
  <div>
    <mini-head :title="$route.name" />
    <div class="head">
      <div :class="['sort', 'sales', { active: sort === 0 }]" @click="sales">
        销量
      </div>
      <div :class="['sort', 'pic', { active: sort === 1 }]" @click="pic">
        <span>价格</span>
        <div :class="['sharp', 'up', { active: num === 1 }]"></div>
        <div :class="['sharp', 'down', { active: num === 0 }]"></div>
      </div>
      <div :class="['sort', 'new', { active: sort === 2 }]" @click="news">
        新品
      </div>
    </div>
    <div class="box" v-for="item in items" :key="item.id">
      <div @click="deta(item.id)" class="img">
        <img :src="item.pic" alt="" />
      </div>
      <div class="text">
        <h4>{{ item.name }}</h4>
        <div class="van-ellipsis text-m">
          商品细节:{{
            item.characteristic ? item.characteristic : '暂无细节描述'
          }}
        </div>
        <div class="icon">
          <div class="pic">价格:￥{{ item.minPrice }}</div>
          <div><van-icon name="shopping-cart-o" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MiniHead from '../../components/MiniHead.vue'
import { goodsItem } from '../../api/index'
export default {
  data () {
    return {
      items: [],
      sort: 0,
      num: -1
    }
  },
  created () {
    // 判断进入的页面
    if (this.$route.query.word) {
      this.fetch()
    } else {
      this.getitem()
    }
  },
  methods: {
    pic () {
      // 判断进入的页面
      if (this.$route.query.word) {
        if (this.sort === 1) {
          if (this.num === 0) {
            this.num = 1
          } else {
            this.num = 0
          }
        } else {
          this.sort = 1
          this.num = 0
        }
        this.fetch()
      } else {
        if (this.sort === 1) {
          if (this.num === 0) {
            this.num = 1
          } else {
            this.num = 0
          }
        } else {
          this.sort = 1
          this.num = 0
        }
        this.getitem()
      }
      // if (this.sort === 1) {
      //   if (this.num === 0) {
      //     this.num = 1
      //   } else {
      //     this.num = 0
      //   }
      // } else {
      //   this.sort = 1
      //   this.num = 0
      // }
      // this.getitem()
    },
    sales () {
      // 判断进入的页面
      if (this.$route.query.word) {
        this.num = -1
        this.sort = 0
        this.fetch()
      } else {
        this.num = -1
        this.sort = 0
        this.getitem()
      }
      // this.num = -1
      // this.sort = 0
      // this.getitem()
    },
    news () {
      // 判断进入的页面
      if (this.$route.query.word) {
        this.num = -1
        this.sort = 2
        this.fetch()
      } else {
        this.num = -1
        this.sort = 2
        this.getitem()
      }
      // this.num = -1
      // this.sort = 2
      // this.getitem()
    },
    // 详情页
    deta (id) {
      this.$router.push({
        path: '/details',
        query: {
          id
        }
      })
    },
    // 搜索页进入初始渲染
    fetch () {
      goodsItem({
        k: this.$route.query.word,
        orderBy: this.orderBy
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
        if (res.data.code === 700) {
          this.items = []
          this.isshow = true
        }
      })
    },
    // 初始数据
    getitem () {
      goodsItem({
        categoryId: this.$route.query.id,
        orderBy: this.orderBy
      }).then((res) => {
        console.log(this.orderBy)
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
        console.log(this.items)
      })
    }
  },
  computed: {
    orderBy () {
      let orderBy = 'ordersDown'
      switch (this.sort) {
        case 1:
          if (this.sort === 0) {
            orderBy = 'ordersDown'
          }
          break
        case 2:
          if (this.sort === 2) {
            orderBy = 'addedDown'
          }
          break
        case 3:
          if (this.sort === 1) {
            if (this.num === 0) {
              orderBy = 'priceDown'
            }
            if (this.num === 1) {
              orderBy = 'priceUp'
            }
          }
          break
        default:
          break
      }
      switch (this.sort) {
        case 1:
          if (this.sort === 1) {
            if (this.num === 0) {
              orderBy = 'priceDown'
            }
            if (this.num === 1) {
              orderBy = 'priceUp'
            }
          }
          break
        default:
          break
      }
      return orderBy
    }
  },
  components: { MiniHead }
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  .sort {
    &.sales {
      &.active {
        color: rgb(91, 7, 248);
      }
    }
    &.pic {
      position: relative;
      &.active {
        color: rgb(91, 7, 248);
      }
      .sharp {
        width: 0;
        height: 0;
        border: 6px solid transparent;
        position: absolute;
        top: 6px;
        &.up {
          border-bottom-color: rgb(12, 12, 12);
          right: -15px;
          top: 0px;
          &.active {
            border-bottom-color: rgb(91, 2, 255);
          }
        }
        &.down {
          border-top-color: rgb(10, 10, 10);
          right: -15px;
          top: 15px;
          &.active {
            border-top-color: rgb(89, 0, 255);
          }
        }
      }
    }
    &.new {
      &.active {
        color: rgb(91, 7, 248);
      }
    }
  }
}
.box {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-top: 10px;
  .img {
    width: 160px;
    height: 140px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    h4 {
      color: rgb(54, 63, 11);
    }
    .text-m {
      font-size: 16px;
    }
    .icon {
      padding-right: 10px;
      display: flex;
      justify-content: space-between;
      color: rgb(250, 10, 10);
      .pic {
        color: rgb(243, 88, 161);
      }
    }
  }
}
</style>
